<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../lib/reset.css">
	<style>
		.sideMenu {
			width: 50px;
			height: 100px;
			background-color: red;
			position: fixed;
			right: -50px;
			top: 50%;
			margin-top: -50px;
		}

		.sideMenu .trigger {
			width: 20px;
			height: 20px;
			background-color: blue;
			position: absolute;
			top: 50%;
			margin-top: -10px;
			left: -20px;
			cursor: pointer;
		}
	</style>

	<script src="../lib/jquery-1.12.1.min.js"></script>
	<script>
		$(document).ready(function() {
        
            var $sideMenu = $('.sideMenu');
            $('.trigger')
                .on('mouseenter', function() {
                    $sideMenu.stop().animate({right: 0}, 500);
                })
                .parent()
                .on('mouseleave', function() {
                    $sideMenu.stop().animate({right: '-50px'}, 500);
                });
            
            /*$('.trigger').hover(function() {
                console.log(1)
            }, function() {
                console.log(2)
            });*/
            
            /*$('.trigger').click(function() {
                alert(999)
            });*/
        
            //////////////////////////////

			/*$('.trigger').on('click', function() { // click

				var $sideMenu = $('.sideMenu');
                var r = 0;

                // console.log($sideMenu.css('right'));

                if ($sideMenu.css('right') == '0px') {
                    r = -50;
                }

                $sideMenu.animate({right: r}, 500);

				//if ($sideMenu.hasClass('r0')) {
					//$sideMenu.animate({right: -50}, 500).removeClass('r0');
				//} else {
					//$sideMenu.animate({right: 0}, 500).addClass('r0');
				//}

			});*/
		});
	</script>
</head>
<body>
	
	<div class="sideMenu">
		<div class="trigger"></div>
	</div>

</body>
</html>